<template>
	<view class="Distribution">
		<view class="Dis-active">
			<text v-for="item in title" :key="item" :class="{'active': item == active}" @click="transf(item)">{{ item }}</text>
		</view>
		<view class="boxleft" v-if="isshow">
			<view class="erweima">
				
			</view>
			<button type="default">转发</button>
		</view>
		<view class="boxright" v-if="!isshow">
			<view class="userinfolist" v-for="(item,index) in list" :key="index">
				
				<view class="listimgtitle">
					<image style="width: 70rpx;height: 70rpx;border-radius: 50%;" :src="item.imgurl" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
				<text class="font">购买号码: {{ item.num }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: "陈小鑫",
						num: "23",
						imgurl: "../../../static/ico/6f6bf0d1612dda491af.jpeg"
					},
					{
						name: "陈大鑫",
						num: "42",
						imgurl: "../../../static/ico/6f6bf0d1612dda491af.jpeg"
					}
				],
				title:[
					"分销码","我的分销"
				],
				active: '分销码',
				isshow: true
			};
		},
		methods:{
			transf(item){
				this.isshow = !this.isshow
				this.active = item
			}
		}
	}
</script>

<style lang="less">
.Distribution{
	width: 100%;
	.boxright{
		.userinfolist{
			width: 95%;
			margin: 0 auto;
			padding: 30rpx 0;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			align-items: center;
			border-bottom: 1rpx solid #EEEEEE;
			.font{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
			.listimgtitle{
				display: flex;
				align-items: center;
				
				text{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #292B32;
				}
				image{
					width: 30rpx;
					height: 26rpx;
					margin-right: 20rpx;
				}
			}
			image{
				width: 40rpx;
				height: 45rpx;
			}
		}
	}
	.boxleft{
		.erweima{
			margin: 50rpx auto;
			width: 634rpx;
			height: 800rpx;
			border: 1rpx solid #808080;
		}
		button{
			width: 550rpx;
			height: 96rpx;
			background: #0180FF;
			border-radius: 48rpx;
			color: #FFFFFF;
		}
	}
	.Dis-active{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 100rpx;
		box-sizing: border-box;
		box-shadow: 0px 2rpx 5rpx 0px rgba(0, 0, 0, 0.15);
		text{
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			padding: 20rpx;
		}
		.active{
			color: #0180FF;
			border-bottom: 4rpx solid #0180FF;
		}
	}
}
</style>
